<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
  <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/charts/Chart.js"></script>
    
    <link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/colResizable-1.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/dataChart.js"></script>
     <script src="js/selectdata.js"></script>
    <script>
        $(function () {
        	chartList("");
           $("#seach").click(function(){
        	   if($("#className").val()!=''){
        		   chartList("&pageList.gradeClass="+$("#className").val());
        		   $("#className").attr('value',"");
        	   }
        	   if($("#select").val()=='0'){
        		   chartList("&pageList.stuName="+$("#selectInput").val());
        	   }
        	 
           });
        });
        function chartList(name) {
        	
        	var url = 'admin/vacate_queryJsonList.action?pageList.pageNo=1'+name;
        	//查询学院
        	$.ajax({
                type: "get",
                cache: false,
                url: url,
                dataType: "json",
                success: function (result) {
               	 var json= eval(result)["dataList"];
               	var list = [0,0,0];
               	 $.each(json,function(index,content){
               		if(content.reasonType=='0'){ //事假
               			list[0] +=1; 
               		}else if(content.reasonType=='1'){
               			list[1] +=1; 
               		}else if(content.reasonType=='2'){
               			list[2] +=1; 
               		}
               	 });
               	Canvas1(list);
                },error: function (result) {
                  
                }
            });
        	}
        	
        function Canvas1(list) {
        	 console.log(list);
            var doughnutData = [
                {
                    value: list[0],
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "事假"
                },
                {
                    value: list[1],
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "病假"
                },
                {
                    value: list[2],
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "休学"
                }
            ];
            var ctx = document.getElementById("Canvas1").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
        }
       
    </script>
</head>
<body>
<div id="search_bar" class="mt10">
		<div class="box">
			<div class="box_border">
				<div class="box_top">
					<b class="pl15">请假信息</b>
				</div>
				<div class="box_center pt10 pb10"></div>
				<div class="box_bottom pb5 pt5 pr10"
					style="border-top:1px solid #dadada;">
					<form
						action="<%=path %>/admin/vacate_queryList.action?pageList.pageNo=1">
						<div class="search_bar_btn" style="text-align: center;">
						<p> 学院：
                        <select class="select" onchange="changeselect()" id="academySelect" 
                            placeholder="请选择学院" data-validate="required:请选择学院">
                        <option value=''>请选择学院</option> 
                        </select>
                        <input id="academyName" name="student.academy" type="hidden" >
                                                                         班别：
                       <select  class="select" onchange="changeselect1()" id="classSelect"  
                         placeholder="请选择班级" data-validate="required:请选择班级">
                       <option value=''>请选择班级</option> 
                        </select>
                        <input id="className" name="student.gradeClass" type="hidden" >
								<select id="select" class="select">
									<option value="">--选择--</option>
									<option value="0">按姓名统计</option>
								</select> &nbsp; <input type="text" id="selectInput"
									class="input-text lh25" size="10">&nbsp; <input
									type="button" id="seach" class="ext_btn ext_btn_success" value="统计">&nbsp;
							</p>
							<p></p>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
    <div id="areascontent">
     <div class="rows" style="margin-bottom: 0.8%; overflow: hidden;">
              <div style="float: right; width: 100%;">
                <div style="height: 390px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div>
                        <div class="panel-body">
                            <canvas id="Canvas1" style="height: 280px; width: 100%; margin-top: 10px;"></canvas>
                            <div style="text-align: center; padding-top: 15px;">
                                <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>休学</span>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <style>
     
    </style>
</body>
</html>
